<%@ page language="java" import="java.util.*,com.dao.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/maintable.css"></link>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
	$("#ch_checkall,#top_ch_checkall").click(function(){
		if(this.checked){
			$("input[name=ck_id]").attr("checked","checked");
		}else{
			$("input[name=ck_id]").removeAttr("checked");
		}		
	});
	
	$("table tr").mouseover(function(){
		$(this).css("background","#D3EAEF");
		$(this).siblings().css("background","white");
	});
	
});
</script>					

<script type="text/javascript">

function getElemPos(obj){
    var pos = {"top":0, "left":0};
     if (obj.offsetParent){
       while (obj.offsetParent){
         pos.top += obj.offsetTop;
         pos.left += obj.offsetLeft;
         obj = obj.offsetParent;
       }
     }else if(obj.x){
       pos.left += obj.x;
     }else if(obj.x){
       pos.top += obj.y;
     }
     return {x:pos.left, y:pos.top};
}

//显示查看的图片
function showDetails(item,goodsId) {
	
	var position = getElemPos(item);
	$("#goods_show_detail").show();
	$("#goods_show_detail").css("left",position.x-150).css("top",position.y);
	$(".goods_picture").attr("src","GoodsServlet.do?flag=showPicture&id="+goodsId);
}

//隐藏图片
function hideDetails(item,goodsId) {
	$("#goods_show_detail").hide();
} 

</script>

<script>

function subForm(pageIndex)
{
	document.form1.submit();
    window.location.href="GoodsServlet.do?flag=manage&pageIndex="+pageIndex;
}
 
function validate(){
	var index=document.getElementById("pageIndex").value;
	if(index>=1&&index<=${pageInfo.pageCount}){  
		window.location.href="GoodsServlet.do?flag=manage&pageIndex="+document.getElementById("pageIndex").value;
	}else{
		alert("跳转页码输入有误");
	}
	
}

//点击上方的删除按钮,进行多项删除
function delMuti(){
	//判断用户至少选了一项
	if($("input[name=ck_id]:checked").size()==0){
		alert("请至少选一项!");
	}
	else{
		if(confirm('确定要删除所选项吗')){
			$("#flag_id").val("delGoods");
			form1.submit();
		}
	}
}

/*所属分类的菜单联动*/
$(function() {
	
	$.ajax({
		url:"GoodsServlet.do?flag=getCate",
		type:"post",
		dataType:"json",
		success:function(cateList){
			/*画一级菜单*/
			$.each(cateList,function(k,cate){
				var str = "<option value="+cate.id+">"+ cate.cateName + "</option>";
				$("#bigCateId").append(str);
				
			});
			
			/*根据一级菜单的改变来联动显示二级才菜单*/
			$("#bigCateId").change(function() {
				$("#smallCateId").empty();
				var pId = this.value;
				var s = "<option  value='-1'>===请选择===</option>";
				$("#smallCateId").append(s);

				$.each(cateList,function(k,cate){
					$.each(cate.subCateList,function(k,sub_cate){
						$("#smallCateId").append(str);
						if (sub_cate.parentId == pId) {
							var str = "<option value="+sub_cate.id+">"+ sub_cate.cateName + "</option>";
							$("#smallCateId").append(str);
						}
					});  
				});
			});
		}
	});
	
});	
					
</script>

<script type="text/javascript">
	setTimeout("$('#bigCateId').val('${param.bigCateId}').change()", 100);/* 下拉框回显 */
	setTimeout("$('#smallCateId').val('${param.smallCateId}')", 100);
</script>

</head>

<body>

	<%
		CateDao _cateDao=new CateDao();
		request.setAttribute("_cateDao", _cateDao);
	
	%>
	<div id="goods_show_detail" style="position: absolute;">
			<img class="goods_picture" height="80px" width="80px" alt="图片" src="">
	</div >
		
	<div class="div_title">
		<div class="div_titlename">
			<img src="images/san_jiao.gif"><span>管理人员基本信息列表</span>
		</div>
		<div class="div_titleoper">
			<input type="checkbox" id="top_ch_checkall" /> 全选
			<a href="goods/goods_add.jsp">
			<img src="images/add.gif" />添加
			</a> <a href="javascript:delMuti()">
			<img src="images/del.gif" />删除</a>
		</div>
		
	</div>
	
	<form action="GoodsServlet.do" name="form1" >
		<input type="hidden" id="flag_id" name="flag" value="manage" />
		
		<div class="div_selected">
			<select name="bigCateId" id="bigCateId">
				<option value="-1">===请选择===</option>
			</select>
					
			<select name="smallCateId" id="smallCateId">
				<option value="-1">===请选择===</option>
			</select>
			
			商品名称：<input id="goodsName" name="goodsName" value="${param.goodsName}"> 
			 <input type="submit" value="查询"  > 
			 
		</div>
		
		<table class="main_table">
			
			<tr>
				<th><input type="checkbox" id="ch_checkall" /></th>
				<th>名称</th>
				<th>单位</th>
				<th>单价</th>
				<th>大分类</th>
				<th>小分类</th>
				<th>操作</th>
			</tr>
			<c:forEach var="goods" items="${goodsList}">
				<tr>
					<td><input type="checkbox" name="ck_id" value="${goods.id}" />
					</td>
					<td>${goods.goodsName }</td>
					<td>${goods.unit }</td>
					<td>${goods.price }</td>
					<td>${_cateDao.getCateName(goods.bigCateId)}</td>
					<td>${_cateDao.getCateName(goods.smallCateId)}</td>
						
					<td>
						<a href="GoodsServlet.do?flag=searchforlook&id=${goods.id}" onmouseover="showDetails(this,'${goods.id}')" onmouseout="hideDetails()">查看</a>| 
						<a href="GoodsServlet.do?flag=searchforupdate&id=${goods.id}">修改</a> | 
						<a href="GoodsServlet.do?flag=del&id=${goods.id}" onclick="return confirm('确定删除？')">删除</a>
					</td>
				</tr>
			</c:forEach>
		</table>
	</form>

	<div class="div_page">
		<div class="div_page_left">
			共有 <label>${pageInfo.rowCount }</label> 条记录，当前第 <label>${pageInfo.pageIndex }</label>
			页，共 <label>${pageInfo.pageCount }</label> 页
		</div>

		<div class="div_page_right">
			<c:choose>
				<c:when test="${pageInfo.hasPre }">
					<button onclick="subForm(1)">首页</button>
					<button onclick="subForm(${pageInfo.pageIndex-1})">上一页</button>
				</c:when>

				<c:otherwise>
								  			 首页
							  	 			 上一页
				</c:otherwise>
			</c:choose>

			<c:choose>
				<c:when test="${pageInfo.hasNext}">
					<button onclick="subForm(${pageInfo.pageIndex+1})">下一页</button>
					<button onclick="subForm(${pageInfo.pageCount})">尾页</button>
				</c:when>

				<c:otherwise>
								  			下一页 
							  	 		         尾页
				</c:otherwise>
			</c:choose>

		<button onclick="validate()">转到</button>  第 <input id="pageIndex" name="pageIndex"  value="${page.pageIndex }"> 页
		</div>

	</div>

	<script type="text/javascript">
		var msg='${msg}';
	 	 if(msg!=''){
	 	 	alert(msg);
	 	 }		  	 
	</script>


</body>

</html>
